<template>
  <div class="rightlist_box">
    <ul class="rightlist_ul">
      <!-- <li class="rightlist_li"  
          v-for="(item,key) of cit" 
          :key="key"
          @click="indexClick"
          @kaiclick="onClick"F
          @guanclick="offClick"
          @dianjiclick="dianjiClick"
          >
          {{key}}
      </li>-->
      <!-- 这里借用了计算属性所以for循环也要改变，上面的是源代码们参考 -->
      <li
        class="rightlist_li"
        v-for="item of leter"
        :key="item"
        @click="indexClick"
        @kaiclick="onClick"
        @guanclick="offClick"
        @dianjiclick="dianjiClick"
        :ref="item"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    cit: Object, //接收abc
    hot: Array // 接收热门城市
  },
  data() {
    return {
      touchfalse: false,
      startY: 0, //对下面的代码进行优化
      timer: null //函数节流，为何这么做，当你的手指不停的滑动，数据不断的更新，所以做一个节流防止频繁操作
    };
  },
  // 点击方法
  methods:{
  },
  // 计算属性
  computed: {
    leter() {
      const leters = [];
      for (let i in this.cit) {
        leters.push(i);
      }
      return leters;
    }
  },
  // 优化代码，updated:是更新数据，并且对自己的渲染已经完成才执行函数，
  updated() {
    // 为何这样优化，因为右边的cities：{}是一个空的对象，当axios请求开始，数据渲染上去，
    // 当你的手指滑动，数据发生改变，所以他就执行了updated进行更新数据。
    this.startY = this.$refs["A"][0].offsetTop;
  },
  methods: {
    indexClick(e) {
      // e.target就是鼠标点击的对象的父元素，innerHTML就是里面的text内容。
      console.log("下标：" + e.target.innerText);
      //实现的功能是点击右侧实现左侧搜索，是兄弟组件传值，
      // 兄弟组件传值是先$emit传给父组件，父组件再传值给你的兄弟组件。
      this.$emit("change", e.target.innerText);
    },
    // 当手指触摸的时候,把touchfalse设置为开的状态
    onClick() {
      this.touchfalse = true;
    },
    // 当手指触摸时候才可以进行的事件处理,滑动事件处理，
    // 思路。计算出字母a到顶部的距离
    dianjiClick(e) {
      if (this.touchfalse) {
        // 先获取a到顶部的高度,教程是74
        // 底下的const startY=this.$refs['A'][0].offsetTop可以进行优化，在上面改变参考
        // const startY=this.$refs['A'][0].offsetTop
        console.log(startY);
        // 优化节流，大大降低dianjiClick（）{}这个函数的执行频率，若是手指滑动操作存在，则清除timer。若不存在则创建一个timer
        if (this.timer) {
          clearTimeout(this.timer);
        }
        // 若是不存在。则创建一个,若正在操作，则延迟16之后执行
        this.timer = setTimeout(() => {
          // 手指的信息-79是最顶部的header部分高度
          const touchY = e.touches[0].clientY - 79;
          console.log(touchY);
          // 字母下标，20是每个字母的高度，这里教程是每个字母是20高度的像素，这每次滑动都需要更新，此处可以优化
          // const index=Math.floor((touchY-startY)/20)
          // 优化后的
          const index = Math.floor((touchY - this.startY) / 20);
          console.log(index);
          // 滑动右侧的字母，左侧的内容区域跟随滚动
          if (index >= 0 && index < this.leters.lenth) {
            this.$emit("change", this.leters[index]);
          }
        },16);
      }
    },
    // 当手指结束时候，把touchfalse设置为关的状态
    offClick() {
      this.touchfalse = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.rightlist_box {
  .rightlist_ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 0.3rem;
    position: fixed;
    right: 0;
    top: 2rem;
    bottom: 0;

    .rightlist_li {
      font-size: 0.35rem;
      line-height: 0.48rem;
    }
  }
}
</style>